<template>

	<view class="edit-container">
		<view class="left">
			总数量: {{number}}
		</view>
		<view class="right" @tap="changeEditState">{{editState?'完成': '编辑'}}</view>
	</view>
	<scroll-view scroll-y class="items">
		<view class="item-wrap">
			<view class="item" v-for="(item, index) in items" :key="item.goodsId">
				<c-check-box v-model="item.selected" @change="itemSelectedStatusChange(item.key, item.selected)"></c-check-box>
				<image :src="item.pic"  mode="scaleToFill"></image>
				<view class="item-info">
					<text class="name">{{item.name}}</text>
	
					<text class="price">{{item.price}}</text>
					小计:
					{{item.number*item.price}}
					<view class="action">
						<uni-number-box v-model="item.number" :min="1" @change="itemNumberChange(item.key, item.number)"></uni-number-box>
					</view>
				</view>
			</view>
			
		</view>
	</scroll-view>
	<view class="submit-bar">
		<c-check-box v-model="allChecked"></c-check-box>
		
		<view class="right" v-if="!editState">
			<text>总价格:{{price}}</text>
			<button>确定</button>
		</view>
		<view class="right" v-if="editState">
			
			<button type="warn" @tap="delItem">删除</button>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				price: 0, // 总价格
				items: [],
				number: 0,
				editState: false,
				selectedKeys: []
			}
		},
		methods: {
			delItem(){
				// 删除商品
				uni.showModal({
					title:"删除商品",
					content: "确定删除吗?",
					success: res => {
						if (res.confirm) {
							// 获取所有选中商品key
							const delKeys = [];
							this.items.forEach(item => {
								if(item.selected) {
									delKeys.push(item.key)
								}
							})
							this.$request('/shopping-cart/remove', {
								method:'POST',
								data: {
									key: delKeys.join(',')
								}
							}).then(res => {
								this.editState = false;
								if (res.code === 0) {
									this.setCartInfo(res.data)
								}
								if (res.code === 700) {
									this.setCartInfo({
										price: 0,
										number: 0,
										items: []
									})
								}
							})
						}
					}
				})
			},
			// 购物车商品数量改变
			itemNumberChange(key, number){
				
				this.$request('/shopping-cart/modifyNumber', {
					method: 'POST',
					data: {
						key,
						number
					}
				}).then(res => {
					if (res.code === 0) {
						this.setCartInfo(res.data)
					}
				})
			},
			allCheckedChange(e){
				console.log(e);
			},
			// 改变单个商品选中状态
			itemSelectedStatusChange(key, selected){
				this.$request('/shopping-cart/select', {
					method: 'POST',
					data: {
						key,
						selected
					}
				}).then(res => {
					if (res.code === 0) {
						this.setCartInfo(res.data)
					}
				})
			},
			changeEditState(){
				this.editState = !this.editState;
			},
			getCartInfo (){
				this.$request('/shopping-cart/info').then(res => {
					if (res.code === 0) {
						this.setCartInfo(res.data)
					}
				})
			},
			setCartInfo({price, number, items}){
				this.price = price;
				this.number = number;
				this.items = items;
			}
		},
		computed: {
			// 计算商品全选状态
			allChecked: {
				get(){
					// 判断所有商品是否都选中 是 全选true 否 false
					if (this.items.length === 0) {
						return false
					} else {
						return this.items.every(item => item.selected)
					}
					
				},
				set(val){
					// 点击全选按钮触发
					/*
						判断全选 赋值的值
						将所有商品选中状态全部变成 全选状态（发请求）
					*/ 
					// 得到所有商品的key
					const keys = [];
					this.items.forEach(item => {
						keys.push(item.key)
					})
					this.itemSelectedStatusChange(keys.join(','), val)
				  
				}
			}
		},
		onLoad(){
			
		},
		onPullDownRefresh() {},
		onShow() {
			// 登录判断
			this.$checkLogin()
			this.getCartInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.edit-container {
		box-sizing: border-box;
		padding: 0 10px;
		font-size: 14px;
		color: #333;
		width: 100%;
		height: 40px;
		position: fixed;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.items {
		position: fixed;
		width: 100%;
		left: 0;
		right: 0;
		top: 40px;
		bottom: 46px;
		.item{
			display: flex;
			align-items: center;
			image{
				width: 180rpx;
				height:180rpx;
			}
			.item-info{
				flex: 1;
				font-size: 12px;
			}
		}
	}

	.submit-bar {
		width: 100%;
		height: 46px;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fafafa;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.right{
			height: 100%;
			display: flex;
			align-items: center;
		}
	}
</style>